<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>请假页</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        body {
            padding-top: 7vh;
            width: 100vw;
            height: 100vh;
            background-color: #F8F8F7;
        }

        .kong {
            height: 1vh;
        }

        footer {
            position: fixed;
            display: flex;
            bottom: 0vh;
            z-index: 99;
            width: 100vw;
            height: 6vh;
            background-color: #FEFEFE;
            border-top: 1px solid #cecece;
        }

        footer span {
            position: relative;
            text-align: center;
            flex: 1;
            height: 100%;
            color: #7e8184;
            line-height: 2.7vh;
            font-size: 1.3vh;
        }

        footer span img {
            position: absolute;
            top: 18%;
            left: 40%;
            width: 18%;
        }

        .top {
            position: fixed;
            display: block;
            z-index: 999;
            width: 100vw;
            height: 5vh;
            padding-bottom: 2vh;
            top: 0vh;
            left: 0;
            background-color: #FEFEFE;
        }

        .top li {
            float: left;
            position: absolute;
        }

        .top li:nth-of-type(1) {
            left: 7vw;
            top: 3.2vh;
            width: 1.3vh;
            height: 1.3vh;
            border-bottom: #1C1C1C 2px solid;
            border-right: #1C1C1C 2px solid;
            transform: rotate(135deg);
        }

        .top li:nth-of-type(2) {
            left: 15vw;
            top: 2.2vh;
        }

        .top li:nth-of-type(3) {
            top: 3vh;
            left: 50%;
            font-size: 1.8vh;
            transform: translate3d(-1em, 0, 0);
        }

        .top li:nth-of-type(4) {
            top: 3vh;
            right: 4vw;
            font-size: 1.8vh;
        }

        .biao {
            position: absolute;
            right: 3vh;
            top: 12.8vh;
            width: 9.4vh;
            height: 9.4vh;
            background: url(./images/keep/已通过.png) no-repeat;
            background-size: contain;
        }

        header {
            width: 100vw;
            background-color: #FEFEFE;
            margin-top: 0vh;
            height: 11.5vh;
        }

        header p:nth-of-type(1) {
            font-size: 19px;
            color: #1C1C1C;
            line-height: 4vh;
        }

        header p {
            padding: 4px 0;
            font-size: 1.6vh;
            line-height: 2vh;
            color: #a8a7a7;
            text-indent: 6vw;
        }

        header p img {
            width: 17px;
            margin-right: 5px;
            vertical-align: text-bottom;
        }

        /* 头部结束 */

        .app {
            margin: 1.5vh 3vw;
            padding: 0vh 3vw;
            padding-top: 1vh;
            width: 88vw;
            border-radius: 13px;
            background-color: #FEFEFE;
            padding-bottom: 1vh;
        }

        .app>li {
            display: block;
            border-radius: 6px;
            padding: 0.5vh 0;
        }

        .app>li h4 {
            padding-top: 0.9vh;
            font-size: 1.6vh;
            color: #848B92;
            line-height: 2.6vh;
            font-weight: 400;
        }

        .app>li h5 {
            font-size: 1.9vh;
            line-height: 3vh;
            font-weight: 400;
            color: #23282E;
            padding-right: 5vw;
        }

        .app .dowhat {
            position: relative;
            margin-top: 2vh;
            margin-bottom: 0.5vh;
            height: 15vh;
            border-radius: 16px;
            background-color: #F2F8FD;
        }

        .app .dowhat span {
            position: absolute;
            font-size: 1.7vh;
            right: 4vw;
            top: 2vh;
        }

        .app .dowhat span:nth-of-type(1) {
            color: #5CADFE;
        }

        .app .dowhat .left {
            position: absolute;
            left: 5vw;
            top: 7vh;
            height: 3vh;
            background: url(./images/keep/竖杠.png) no-repeat 0.23vh 1vh;
            background-size: contain;
        }

        .app .dowhat .left p {
            position: absolute;
            float: left;
            width: 1vh;
            height: 1vh;
            border: 1px solid #C2C3C4;
            border-radius: 1vh;
        }

        .app .dowhat .left p:nth-of-type(1) {
            top: -0.3vh;
            left: 0;
        }

        .app .dowhat .left p:nth-of-type(2) {
            top: 3vh;
            left: 0;
        }

        .app .dowhat .right {
            position: absolute;
            top: 6vh;
            left: 1.8vw;
            font-size: 1.9vh;
            line-height: 3vh;
            color: #C2C3C4;
        }

        .app .dowhat h3 {
            position: absolute;
            font-size: 2vh;
            left: 6vw;
            top: 2vh;
        }

        .app .zipai {
            margin-top: 4px;
            margin-bottom: 1vh;
            width: 8.3vh;
            height: 8.3vh;
            background-color: rgb(65, 61, 61);
            overflow: hidden;
        }

        .app .zipai img {
            width: 100%;
            transform: translate3d(0, -24%, 0);
        }

        .app .qianming {
            height: 8vh;
            width: 20vh;
            background-color: rgb(99, 51, 51);
            background: no-repeat url(./images/jl.jpg);
            background-size: contain;
        }

        .liucheng h3 {
            line-height: 6vh;
        }

        .liucheng li {
            position: relative;
            display: inline-block;
            margin: 0.3vh 0;
            width: 100%;
            vertical-align: text-top;
            overflow: hidden;
            /* background-color: rgb(177, 13, 13); */
        }

        .liucheng li .shu {
            z-index: 1;
            position: absolute;
            height: 75%;
            margin-top: 5.5vh;
            left: 3.2vh;
            width: 0.6vw;
            background-color: #E2E4E3;
        }

        .liucheng li .tou {
            display: inline-block;
            width: 5vh;
            height: 5vh;
            margin-left: 1vh;
            margin-bottom: 2.7vh;
            background-color: #3396FB;
            overflow: hidden;
            border-radius: 7px;
        }

        .liucheng li .tou .dui {
            position: absolute;
            left: 4.5vh;
            top: 3.3vh;
            width: 2vh;
            height: 2vh;
            /* background: url(./images/keep/green.png) no-repeat; */
            /* background-size: contain; */
            /* background-color: rgb(170, 22, 22); */
        }

        .liucheng li .tou img {
            width: 100%;
        }

        .liucheng li .tou span {
            position: absolute;
            font-size: 1.5vh;
            left: 1.9vh;
            top: 1.3vh;
            color: #F8F8F7;
        }

        .liucheng li .you {
            display: inline-block;
            vertical-align: top;
            padding-left: 2.5vw;
        }

        .liucheng li .you h1 {
            display: block;
            width: 70vw;
            height: 5vh;
            border-radius: 5px;
            font-weight: 400;
            font-size: 1.8vh;
            height: 5vh;
            line-height: 4.5vh;
            background-color: #F2F2F6;
            color: #6d6d6d;
            margin-bottom: 1vh;
        }

        .liucheng .chaosong .you span:last-child {
            display: inline-block;
            width: 0.8vh;
            height: 0.8vh;
            border: 1px solid #848B92;
            border-top: 0;
            border-left: 0;
            transform: rotate(45deg) translate3d(-1vw, 1vh, 0);
        }

        .liucheng .ming {
            display: block;
            width: 20vh;
            height: 6vh;
            line-height: 6vh;
            margin-bottom: 3vh;
            color: #848B92;
            font-size: 1.6vh;
            /* background-color: rgb(23, 129, 32); */
        }

        /*领导签名*/
        .liucheng .daoyuan .ming {
            background: url(./images/jl.jpg) no-repeat 9vw;
            background-size: contain;
        }

        .liucheng .shuju .ming {
            background: url(./images/jl.jpg) no-repeat 9vw;
            background-size: contain;
        }

        .liucheng .yuanzhang .ming {
            background: url(./images/jl.jpg) no-repeat 9vw;
            background-size: contain;
        }

        .liucheng li .you span:nth-of-type(2) {
            display: block;
            position: absolute;
            top: -0.2vh;
            right: 0vw;
            color: #B6B6B6;
            font-size: 1.6vh;
        }

        .liucheng li .you span:nth-of-type(1) {
            width: 60vw;
            line-height: 2vh;
        }

        .liucheng li .you span:nth-of-type(1) h4 {
            font-weight: 400;
        }

        .liucheng li .you span:nth-of-type(1) h5 {
            display: inline-block;
            color: #8c8d8f;
            font-weight: 400;
            line-height: 4vh;
            font-size: 1.6vh;
        }

        .liucheng li .you span:nth-of-type(1) h6 {
            display: inline-block;
            color: #6D8BAA;
            font-weight: 400;
            padding-left: 1em;
        }

        .haoshi {
            position: relative;
            margin: 6vh 8vw;
            height: 10vh;
            font-size: 1.6vh;
            text-align: center;
            margin-bottom: 8vh;
            color: #B6B6B6;
        }

        .haoshi img {
            position: absolute;
            width: 2.9vh;
            height: 2.9vh;
            top: -0.7vh;
            left: 5.7vw;
        }

        .liucheng .chaosong .csren {
            margin: 0 15vw;
            margin-top: -2vh;
            margin-bottom: 5vh;
            /* background-color: rgb(170, 45, 45); */
            display: block;
        }

        .liucheng .chaosong .csren li {
            width: 20%;
            font-size: 1.2vh;
            text-align: center;
            color: #96979B;
        }

        .liucheng .chaosong .csren img {
            width: 3vh;
            height: 3vh;
            border-radius: 3px;
            background-color: #3396FB;
        }

        #pai {
            position: fixed;
            top: 50%;
            left: 50%;
            z-index: 999;
            transform: translate3d(-50%, -50%, 0);
            background: url(./images/my.jpg) no-repeat rgb(0, 0, 0);
            background-size: 100vw auto;
            transition: all 0.2s ease;
        }
    </style>
</head>

<body>
    <!-- 头部按钮 -->
    <div class="top">
        <ul>
            <li id="zuo"></li>
            <li><svg t="1638929544015" class="icon" viewBox="0 0 1024 1024" version="1.1" p-id="9907" width="3.7vh"
                    height="3.7vh">
                    <path
                        d="M512 557.248l233.344 233.408 45.248-45.248L557.248 512l233.344-233.344-45.248-45.312L512 466.752 278.656 233.344l-45.312 45.312L466.752 512l-233.408 233.344 45.312 45.312L512 557.248z"
                        p-id="9908"></path>
                </svg></li>
            <li>详情</li>
            <li>更多</li>
        </ul>
    </div>
    <header>
        <!-- 头部内容 -->
        <p>某某某提交的学生日常请假申请</p>
        <p><img src="./images/keep/school.png" alt=""> 某某某某学院</p>
        <p>审批通过</p>
    </header>
    <div class="biao"></div>
    <ul class="app">
        <li>
            <h4>审批编号</h4>
            <h5>202112171259000331528</h5>
        </li>
        <li>
            <h4>所在部门</h4>
            <h5>某某某某学院-学生-某某某某-信管886</h5>
            <div class="dowhat">
                <span>明细</span>
                <h3>【离校】病假 1 天</h3>
                <span class="left">
                    <p></p>
                    <p></p>
                </span>
                <pre class="right">
    2066-12-19 上午
    2066-12-19 下午

                </pre>
            </div>
        </li>
        <li>
            <h4>请假事由</h4>
            <h5>某某某某某某了需要去某某某某</h5>
        </li>
        <li>
            <h4>目的地（详细地址）</h4>
            <h5>某某省,某某市,某某区,某某镇,某某院
            </h5>
        </li>
        <li>
            <h4>个人自拍照</h4>
            <div class="zipai">
                <img src="./images/my.jpg" alt="">
            </div>
        </li>
        <li>
            <h4>紧急联系人姓名</h4>
            <h5>某某某某</h5>
        </li>
        <li>
            <h4>联系人关系</h4>
            <h5>兄弟</h5>
        </li>
        <li>
            <h4>联系人电话</h4>
            <h5 style="color: #69769B;">+86-1888888888</h5>
            <p style="color: #E47967;font-size: 13px;padding-bottom: 1vh;">
                本人承诺上述填写内容真实，并保证在请假期间严格遵守法律法规。对自己的安全负责，如出现问题，由本人负责。按时返校，及时销假。</p>
        </li>
        <li>
            <h4>手写签名</h4>
            <div class="qianming"></div>
        </li>
    </ul>
    <div class="app">
        <p>查看TA的历史记录</p>
    </div>
    <div class="app liucheng">
        <h3>流程</h3>
        <ul>
            <li>
                <img src="" alt="" class="shu">
                <div class="tou"><img src="./images/keep/green.png" alt="" class="dui"><img
                        src="./images/benrentouxiang.JPG" alt=""></div>
                <div class="you"><span>
                        <h4>发起申请</h4>
                        <h5>我</h5>
                    </span><span>12.17 12:59</span></div>
            </li>

            <li class="daoyuan">
                <img src="" alt="" class="shu">
                <div class="tou"><img src="./images/keep/green.png" alt="" class="dui"><span>某某</span><img src=""
                        alt=""></div>
                <div class="you"><span>
                        <h4>学院辅导员</h4>
                        <h5>某某某1（已同意）</h5>
                    </span><span>12.17 15:57</span>
                    <div class="ming">签名: </div>
                </div>

            </li>
            <li class="shuju">
                <img src="" alt="" class="shu">
                <div class="tou"><img src="./images/keep/green.png" alt="" class="dui"><span>某某</span><img src=""
                        alt=""></div>
                <div class="you"><span>
                        <h4>学院党总支副书记</h4>
                        <h5>某某2（已同意）</h5>
                    </span><span>12.17 16:57</span>
                    <br>
                    <h1>&nbsp;&nbsp;同意</h1>
                    <div class="ming">签名: <img src="" alt=""></div>
                </div>

            </li>
            <li class="yuanzhang">
                <img src="" alt="" class="shu">
                <div class="tou"><img src="./images/keep/green.png" alt="" class="dui"><span>某某</span><img src=""
                        alt=""></div>
                <div class="you"><span>
                        <h4>学院副院长</h4>
                        <h5>某某3（已同意）</h5>
                    </span><span>12.17 17:44</span>
                    <br>
                    <h1>&nbsp;&nbsp;同意</h1>
                    <div class="ming">签名: <img src="" alt=""></div>
            </li>
            <li class="chaosong">
                <div class="tou"><img src="./images/keep/green.png" alt="" class="dui"><img src="./images/keep/laba.png"
                        alt=""></div>
                <div class="you"><span>
                        <h4>抄送人</h4>
                        <h5>已抄送4人 </h5>
                        <h6> 全部未读</h6>
                    </span>
                    <span id="chaoSong"></span>
                </div>
                <ul class="csren" id="csren">
                    <li><img src="./images/banzhang.png" alt=""><br><span>某某1</span></li>
                    <li><img src="./images/banzhang.png" alt=""><br><span>某某2</span></li>
                    <li><img src="./images/banzhang.png" alt=""><br><span>某某3</span></li>
                </ul>
            </li>
        </ul>
    </div>

    <div class="haoshi">
        <img src="./images/keep/shenpi.png">
        <p> &nbsp;&nbsp;&nbsp;共耗时4小时45分钟,比59.3%的同类</p>
        <p>申请快</p>
    </div>



    <div class="kong"></div>
    <footer>
        <span><img src="./images/keep/xiugai.png" alt=""><br>修改</span>
        <span><img src="./images/keep/chexiao.png" alt=""><br>撤销</span>
        <span><img src="./images/keep/pinglun.png" alt=""><br>评论</span>
        <span><img src="./images/keep/gengduo.png" alt=""><br>更多</span>
    </footer>
    <div id="pai"></div>
    <script>
        // 底部按钮
        const chaoSong = document.querySelector('#chaoSong');
        const csren = document.querySelector('#csren');
        var i = 1;
        chaoSong.addEventListener("click", function () {
            if (i == 1) {
                chaoSong.style.transform = " translate3d(-2vw, 1vh, 0) rotate(-135deg)";
                csren.style.display = "none";
                i = 0;
            } else {
                i = 1;
                chaoSong.style.transform = "rotate(45deg) translate3d(-1vw, 1vh, 0)";
                csren.style.display = "block";
            }
        })
    </script>
    <script>
        // 自拍的点击效果
        var zipai = document.querySelector(".zipai");
        var pai = document.querySelector("#pai");
        zipai.addEventListener("click", function () {
            pai.style.width = "100vw";
            pai.style.height = "100vh";
            pai.style.backgroundSize = "100vw auto";
        })
        pai.addEventListener("click", function () {
            pai.style.width = "0vw";
            pai.style.height = "0vh";
            pai.style.backgroundSize = "0vw auto";
        })
    </script>
</body>

</html>